import React, { Component, useReducer } from 'react';

// import { SearchBar,WingBlank } from 'antd-mobile';
import { SearchBar,TabBar,List,Button,Radio, Flex,Icon, Carousel  } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import { connect } from 'react-redux'
import { actionCreators } from '../course/store'
import { addCart,getCourseDescript } from '../home/store/actionCreators'
import { removeCart } from '../cart/store/actionCreators'
import { getCartList,ClearPhoneUser } from '../../components/header/store/actionCreators'
import { getMyCourse, getOneDay } from '../../page/myCourse/store/actionCreators'
import { toPay } from '../cart/store/actionCreators'
import { getBanner } from '../../components/banner/store/actionCreators'
import { withRouter } from 'react-router-dom'
import { message, Icon as PIcon, Modal, Button as PButton } from 'antd'
import Util from '../../common/utils'
import {
  Wrapper,
  UlWrapper,
  ListWrapper,
  CartTitle,
  CartWrapper,
  SettlementWrapper,
  CourseWrapper,
  UlCourseWrapper,
  SelectItem
} from './style'

const Item = List.Item;

const sleMenu = [
  {
    title: '我的身份',
    menu: [
      {
        name: '小学生',
        val: '小学生'
      },
      {
        name: '初中生',
        val: '初中生'
      },
      {
        name: '高中生',
        val: '高中生'
      }
    ]
  },
  {
    title: '所属年级',
    menu: [
      {
        name: '一年级',
        val: '一年级'
      },
      {
        name: '二年级',
        val: '二年级'
      },
      {
        name: '三年级',
        val: '三年级'
      },
      {
        name: '四年级',
        val: '四年级'
      },
      {
        name: '五年级',
        val: '五年级'
      },
      {
        name: '六年级',
        val: '六年级'
      }
    ]
  },
  {
    title: '所属科目',
    menu: [
      {
        name: '小学语文',
        val: '小学语文'
      },
      {
        name: '小学数学',
        val: '小学数学'
      },
      {
        name: '小学英语',
        val: '小学英语'
      },
      {
        name: '中小学师德培训',
        val: '中小学师德培训'
      }
    ]
  },
  {
    title: '课程状态',
    menu: [
      {
        name: '即将开始',
        val: 'soon'
      },
      {
        name: '直播中',
        val: 'playing'
      },
      {
        name: '精彩回放',
        val: 'video'

      }
    ]
  },
  {
    title: '课程类型',
    menu: [
      {
        name: '收费课程',
        val: 0
      },
      {
        name: '公益课程',
        val: 1
      },
      {
        name: '第三方课程',
        val: 3
      }
    ]
  }
  
]


class PHome extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'home',
      hidden: false,
      fullScreen: false,
      grade: '全部', //年级
      subjectName: '全部', //科目
      type: 'all', //类型
      key: '', //搜索,
      lessonType: '', //状态
      cartSelect: [],
      checked: false,
      total: 0,
      videoId: '',
      activeDate: this.transtionDate(),
      payMethod: 'wx',
      startTime: this.transtionDate(),
      showSelect: false,
      identfiy: '小学生'
    };
  }

  renderContent(pageText) {
    let result = ''
    switch(pageText) {
      case 'home':
        result = this.renderHome()
        break;
      case 'cart':
        result = this.renderCart()
        break;
      case 'course': 
        result = this.renderCourse()
        break;
    }
    return result
  }

  componentDidMount() {
    let userData = Util.local('userData')
    if(!userData) {
      if(Util.session('user')) {
        window.location.href="/logout"
      }else {
        window.location.href="/"
      }
      return
    }
    let url = window.location.href
    if(url.indexOf('?')!=-1){
      setTimeout(()=> {
        this.getList()
        this.props.getCartList()
        this.getCourseList()
      },3000)
    } else {
      this.getList()
      this.props.getCartList()
      this.getCourseList()
    }
    this.props.getBannner()

    let user = Util.local('userData')
    let str = '小学生'
    if(user.stuGradeStr === '初一' || user.stuGradeStr === '初二' || user.stuGradeStr === '初三') {
      str = '初中生'
    }else if(user.stuGradeStr === '高一' || user.stuGradeStr === '高二' || user.stuGradeStr === '高三') {
      str = '高中生'
    }else {
      str = '小学生'
    }
    this.initSubject(str)
    this.setState({
      identfiy: str
    })
  }

  initSubject(str) {
    if(str === '小学生') {
      sleMenu[1] = {
        title: '所属年级',
        menu: [
          {
            name: '一年级',
            val: '一年级'
          },
          {
            name: '二年级',
            val: '二年级'
          },
          {
            name: '三年级',
            val: '三年级'
          },
          {
            name: '四年级',
            val: '四年级'
          },
          {
            name: '五年级',
            val: '五年级'
          },
          {
            name: '六年级',
            val: '六年级'
          }
        ]
      }

      sleMenu[2] = {
        title: '所属科目',
        menu: [
          {
            name: '小学语文',
            val: '小学语文'
          },
          {
            name: '小学数学',
            val: '小学数学'
          },
          {
            name: '小学英语',
            val: '小学英语'
          },
          {
            name: '中小学师德培训',
            val: '中小学师德培训'
          }
        ]
      }
    } else if(str === '初中生') {
      sleMenu[1] = {
        title: '所属年级',
        menu: [
          {
            name: '初一',
            val: '初一'
          },
          {
            name: '初二',
            val: '初二'
          },
          {
            name: '初三',
            val: '初三'
          },
        ]
      }

      sleMenu[2]= {
        title: '所属科目',
        menu: [
          {
            name: '初中语文',
            val: '初中语文'
          },
          {
            name: '初中数学',
            val: '初中数学'
          },
          {
            name: '初中英语',
            val: '初中英语'
          },
          {
            name: '初中科学',
            val: '初中科学'
          }
        ]
      }
    }else if(str === '高中生') {
      sleMenu[1] = {
        title: '所属年级',
        menu: [
          {
            name: '高一',
            val: '高一'
          },
          {
            name: '高二',
            val: '高二'
          },
          {
            name: '高三',
            val: '高三'
          },
        ]
      }

      sleMenu[2]= {
        title: '所属科目',
        menu: [
          {
            name: '高中语文',
            val: '高中语文'
          },
          {
            name: '高中数学',
            val: '高中数学'
          },
          {
            name: '高中英语',
            val: '高中英语'
          },
          {
            name: '高中科学',
            val: '高中科学'
          },
          {
            name: '高中地理',
            val: '高中地理'
          },
          {
            name: '高中历史',
            val: '高中历史'
          },
          {
            name: '高中生物',
            val: '高中生物'
          },
          {
            name: '高中政治',
            val: '高中政治'
          },
          {
            name: '高中化学',
            val: '高中化学'
          }
        ]
      }
    }
  }

  componentWillReceiveProps(e) {
    console.log(e)
  }

  getList() {
    this.props.getLesson({
      grade: this.state.grade,
      subjectName: this.state.subjectName,
      type: this.state.type,
      key: this.state.key,
      lessonType: this.state.lessonType
    })
  }

  addCart(params) {
    let status = params.get('shoppingStatus')
    if(status === '已经购买' || status==='免费') {
      this.setState({
        selectedTab: ''
      })
      this.props.getCourseDescript({
        lessonId: params.get('lessonId')
      })
    } else {
      if(status === '已加入购物车') {
        this.props.removeCart({
          lessonId: params.get('lessonId')
        })
        setTimeout(() => {
          this.getList() 
        }, 300);
      }else {
        this.props.addCart({
          lessonId: params.get('lessonId')
        })
        setTimeout(() => {
          this.getList() 
        }, 300);
      }
    }
  }

  toItem(params) {
    this.setState({
      selectedTab: ''
    })
    this.props.getCourseDescript({
      lessonId: params.get('lessonId')
    })
  }
  // 首页
  renderHome() {
    return (
      <div style={{width: '100%'}}>
        <div style={{position: 'relative', width: '100%', display: 'flex', alignItems: 'center', paddingLeft: '18px', paddingRight: '18px'}}>
          <span style={{fontSize: '19px', position: 'relative', fontWeight: 'bold'}} onClick={()=> this.setState({showSelect: true})}>请选择
            <PIcon type="caret-right" style={{transform: 'rotate(45deg)', fontSize: '16px', position: 'relative', color: '#878787', top: '6px', left: '4px'}} />
          </span>
          <SearchBar style={{width: 'calc(100% - 100px)'}} placeholder="请输入搜索内容"  ref={ref => this.autoFocusInst = ref} onSubmit={(obj)=> {this.setState({key: obj}, () => this.getList());}}/>
          {/* <a style={{backgroundImage: 'url(' + require('./img/logou.png')+ ')', display: 'inline-block', width: '10%', height: '44px', lineHeight: '44px'}} onClick={()=> this.props.logout()}></a> */}
          <a onClick={()=> this.props.logout()}>
            <img src={require('./img/logou.png')} style={{width: '22px', height: '22px'}}/>
          </a>
        </div>
        <Carousel autoplay style={{height: '160px', lineHeight: '160px'}}>
          {
            this.props.banner.map(item=> {
              return (<div key={item}>
                <img src={item} style={{width: '100%', height: '160px'}} />
              </div>)
            })
          }
        </Carousel>
        <ListWrapper>
          <List>
            {
              this.props.courseList ? this.props.courseList.map(item => {
                return (
                  <Item 
                  style={{height: '100%', paddingLeft: '0'}}
                  key={item.get('lessonId')}
                  >
                    <div style={{paddingLeft: '20px', paddingRight: '15px'}}>
                      <img style={{width: '7.5rem', height: '5.3rem', float: 'left', marginRight: '0.6rem', borderRadius: '5%'}} src={item.get('coverUrl')}/>
                      <div style={{marginLeft: '7.5rem'}}>
                        <p style={{fontWeight: 'bold'}}>{item.get('lessonName')}</p>
                        <p style={{fontSize: '0.8rem', color: '#999', lineHeight: '24px', wordWrap: 'break-word', wordBreak: 'normal'}}>时间: {item.get('lessonDate')}</p>
                        <div>
                          <span style={{color: '#FF5354', fontWeight: 'bold'}}>￥{item.get('lessonPrice')}</span>
                          <div style={{float: 'right'}}>
                            {
                              item.get('shoppingStatus') === '已经购买' ||  item.get('shoppingStatus') === '免费'? '' :<Button inline  size="small" style={{backgroundColor: '#8BCA34', color: '#fff', marginRight: '4px', paddingRight: '6px', paddingLeft: '6px'}} onClick={()=> this.toItem(item)}>试听</Button>
                            }
                            <Button inline  size="small" style={{backgroundColor: '#8BCA34', color: '#fff', paddingRight: '6px', paddingLeft: '6px'}} onClick={()=> this.addCart(item)}>{item.get('shoppingStatus') === '已经购买' || item.get('shoppingStatus') === '免费'? '去观看' : (item.get('shoppingStatus')==='已加入购物车' ? '移除购物车': '加入购物车')}</Button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </Item>
                ) 
              }) : ''
            }
          </List>
        </ListWrapper>
      </div>
    );
  }
  // 观看视频
  renderVideo() {
    const course = this.props.courseDescript ? this.props.courseDescript : {}
    return (<div>
      <CartTitle>{ course.get('lessonName')}</CartTitle>
      <ListWrapper>
        {
          course ? <div>
          <div style={{paddingLeft: '0.8rem',paddingTop: '0.4rem', backgroundColor: '#fff', height: '7rem'}}>
              <img style={{width: '10rem', height: '6rem', float: 'left', marginRight: '0.6rem'}} src={course.get('coverUrl')}/>
              <p style={{fontSize: '0.9rem', color: '#666', lineHeight: '24px'}}>￥{course.get('lessonPrice')}</p>
              <p style={{fontSize: '0.9rem', color: '#666', lineHeight: '24px'}}>主讲: {course.get('teacherName')}</p>
              <p style={{fontSize: '0.9rem', color: '#666', lineHeight: '24px'}}>课时：共{course.get('lessonPeriodAmount')}课时</p>
          </div>
          {/* <Button inline  size="small" style={{backgroundColor: '#8BCA34', color: '#fff'}} onClick={()=> this.addCart(item)}>{item.get('shoppingStatus') === '已经购买' ? '去观看' : (item.get('shoppingStatus')==='已加入购物车' ? '移除购物车': '加入购物车')}</Button> */}
          <List renderHeader={() => '目录' + (course.get('data') ? course.get('data').size: '')} className="my-list">
            {
              course.get('data') ? (
                course.get('data').map((obj, idx)=> {
                  return (
                    <Item key={idx}>
                      <div style={{display: 'flex', fontSize: '0.9rem', color: '#666', marginRight: '2.5rem'}}>
                        <span style={{marginRight: '0.6rem'}}>{idx+1}</span>
                        <div style={{display: 'flex',width: '100%'}}>
                          <span style={{marginRight: '0.6rem'}}>{obj.get('period')}</span>
                          <p style={{overflow: 'hidden', justifyContent: 'space-around', textOverflow: 'ellipsis'}}>{obj.get('name')}</p>
                          {
                            obj.get('roomId') ? <img style={{position: 'absolute', right: '0.6rem'}} src={require('./img/play.png')} onClick={this.toPlay.bind(this, obj)}></img> : ''
                          }
                        </div>
                      </div>
                    </Item>
                  )
                })
              ) : ''
            }
          </List>
        </div> : ''
        }
        </ListWrapper>
    </div>)
  }
  // 播放
  toPlay(params) {
    let obj = {}
    if(params.get('isTrial')) {
      obj.isTrial = params.get('isTrial') === 'true'? true : false
      obj.time = params.get('trial_limit_time') ? params.get('trial_limit_time') : 0
      sessionStorage.setItem('isShow',JSON.stringify(obj))
    }else {
      sessionStorage.setItem('isShow',JSON.stringify(obj))
    }
    this.props.history.push({
      pathname: "/room/" + params.get('roomId')
    })
    
    // window.location.href="/room?roomId=" + obj.get('roomId')
  }
  // 我的课程
  renderCourse() {
    return (
      <div>
        <CartWrapper>
          <CartTitle>我的课表</CartTitle>
          <CourseWrapper>
            {
              this.state.activeDate === this.state.startTime ? <Icon size="lg" type="left" style={{color: '#ccc'}} /> : <Icon size="lg" type="left" onClick={()=> this.changeTime('pre')}/>
            }
            <UlCourseWrapper>
              {
                this.props.myCourse ? this.props.myCourse.map(item=> {
                  return (
                    <li key={item.get('date')} className={this.state.activeDate == item.get('date') ? 'active' : ''} onClick={()=> this.setState({activeDate: item.get('date')}, ()=> this.props.getOneDate({thisDate: item.get('date')}))}>
                      <a>
                        <p>{item.get('week')}</p>
                        <p>{item.get('month')}月{item.get('day')}</p>
                      </a>
                  </li>
                  )
                }) : ''
              }
            </UlCourseWrapper>
            <Icon size="lg" type="right" onClick={()=> this.changeTime('next')}/>
          </CourseWrapper>
          <ListWrapper>
            <List>
              {
                this.props.myList.size > 0 ? this.props.myList.map(item => {
                  return (
                    <Item 
                    style={{height: '100%', paddingLeft: '8px'}}
                    key={item.get('actId')}
                    >
                      <div>
                        <img style={{width: '8rem', height: '4.8rem', float: 'left', marginRight: '0.6rem'}} src={item.get('coverUrl')}/>
                        <p style={{fontSize: '0.9rem', color: '#666', lineHeight: '24px'}}>课程时间: {item.get('lessonDate')}</p>
                        <p style={{color: '#FF5354', fontSize: '0.9rem'}}>{item.get('activityStatus')}</p>
                        {
                          item.get('type') === '即将开始' ? '' :  <Button inline  size="small" style={{backgroundColor: '#8BCA34', color: '#fff'}} onClick={()=> this.toWatch(item)}>去观看</Button>
                        }
                      </div>
                    </Item>
                  ) 
                }) : ''
              }
            </List>
          </ListWrapper>
        </CartWrapper>
      </div>
    )
  }

  toWatch(item) {
    debugger
    // window.location.href="/room?roomId=" + item.get('roomId')
    this.props.history.push({
      pathname: "/room/" + item.get('roomId')
    })
  }

  changeTime(str) {
    let ctime = 7*24*60*60*1000
    if(str === 'next') {
      let startTime = new Date(this.state.activeDate).getTime()
      let etime = this.transtionDate(parseInt(startTime)+ ctime)
      this.setState({
        activeDate: etime
      }, ()=> this.getCourseList(etime))
    } else {
      let startTime = new Date(this.state.activeDate).getTime()
      let etime = this.transtionDate(parseInt(startTime) - ctime)
      this.setState({
        activeDate: etime
      }, ()=> this.getCourseList(etime))
    }
  }

  getCourseList(params) {
    params = params ? params : this.transtionDate()
    this.props.getMyCourse({
      startDate: params
    })
  }

  transtionDate(str) {
    let time = str ? new Date(str) : new Date()
    let year = time.getFullYear()
    let month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1
    let day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
    return year + '-'  + month + '-' + day
  }

  caculate() {
    if(!this.state.checked) {
      let obj = [], price=0;
      this.props.cart.get('list').map(item => {
        price+= item.get('price')
        obj.push({
          lessonId: item.get('id') ? item.get('id') : '',
          schoolId: item.get('schoolId') ? item.get('schoolId'): ''
        })
      })
      this.setState({
        cartSelect: obj,
        total: price,
        checked: !this.state.checked
      })
    }else {
      this.setState({
        cartSelect: [],
        total: 0,
        checked: !this.state.checked
      })
    }
  }

  selectCart(obj) {
    let id = obj.get('id') ? obj.get('id') : ''
    let schoolId = obj.get('schoolId') ? obj.get('schoolId') : ''
    let arr = this.state.cartSelect
    let result = []
    let status = false
    arr.map(item => {
      if(item.lessonId === id) {
        status = true
      }      
    })
    if(status) {
      arr.map(item => {
        if(item.lessonId === id) {
        }else {
          result.push(item)
        }      
      })
      arr = result
    }else {
      arr.push({
        lessonId: id,
        schoolId: schoolId
      })
    }
    this.setState({
      cartSelect: arr,
    }, ()=> this.caculatePrice()) 
  }

  caculatePrice() {
    let price = 0
    let arr = this.state.cartSelect
    this.props.cart.get('list').map(item => {
      arr.map(select => {
        // console.log('12',item.get('id'),  select.schoolId)
        if(item.get('id') == select.lessonId) {
          price+= item.get('price')
        }
      })
    })
    price = price.toFixed(2)
    if(arr.length === this.props.cart.get('list').size) {
      this.setState({
        total: price,
        checked: true
      })
    }else {
      this.setState({
        total: price,
        checked: false
      })
    }
  }
  // 购物车页面
  renderCart() {
    return (
      <div>
      <CartWrapper>
        <CartTitle>购物车</CartTitle>
        <ListWrapper>
          <List>
            {
              this.props.cart.get('list') ? 
              this.props.cart.get('list').map(item=> {
                return (
                  <Item
                  key={item.get('id')}
                  >
                    <div>
                      <div style={{float: 'left', position: 'relative'}}>
                        <div style={{position: "absolute", left:'0', top: '50%', transform: 'translateY(-50%)'}}>
                          <input type="checkbox" className="select-cart" checked={this.isChecked(item.get('id'))} onChange={() => this.selectCart(item)} />
                        </div>
                        <img style={{width: '7.5rem', height: '5.3rem', marginRight: '0.6rem', marginLeft: '1.3rem', borderRadius: '5%'}} src={item.get('image')}/>
                      </div>
                      <p style={{fontWeight: 'bold'}}>{item.get('name')}</p>
                      <p style={{fontSize: '12px', color: '#999', lineHeight: '24px', whiteSpace: 'pre-wrap', wordBreak: 'break-all'}}>时间: {item.get('startDateStr')}至{item.get('endDateStr')}</p>
                      <p style={{color: '#FF5354', fontWeight: 'bold'}}>￥{item.get('price')}</p>
                    </div>
                  </Item>
                )
              }) :''
            }

          </List>
        </ListWrapper>
      </CartWrapper>
      <SettlementWrapper>
        <div style={{marginLeft: '1rem', display: 'flex',alignItems: 'center', justifyContent: 'space-between',alignItems: 'center',marginBottom: '16px', fontSize: '0.8rem', paddingRight: '1rem'}}>
          <div>
            <input type="checkbox" checked={this.state.checked} onChange={()=> this.caculate()}/><span style={{marginLeft: '8px', position: 'relative', top: '-5px'}}>全选</span>
          </div>
          <div>
            <p style={{marginLeft: '0.3rem', marginBottom: '0.6rem'}}>
               合计：
              <span style={{fontWeight: 'bold', color: '#ff4d4d'}}>
               ￥{this.state.total}
              </span>
            </p>
            <p style={{marginLeft: '0.3rem'}}>
              <input type="radio" name="pay" checked={this.state.payMethod === 'al' ? true: false} onChange={()=> this.setState({payMethod: 'al'})}/> 支付宝 &nbsp;
              <input type="radio" name="pay" checked={this.state.payMethod === 'wx' ? true: false} onChange={()=> this.setState({payMethod: 'wx'})}/> 微信
            </p>
          </div>
          <a onClick={()=> this.toPay()} style={{display: 'inline-block', backgroundColor: '#8BCA34', height: '40px', fontSize: '1rem', color: '#fff', lineHeight: '40px', borderRadius: '20px',width: '90px', textAlign: 'center'}}>
            结算 {this.state.cartSelect.length > 0 ? '('+ this.state.cartSelect.length +')': ''}
          </a>
        </div>
     </SettlementWrapper>
     </div>
    )
  }

  isChecked(id) {
    let arr = this.state.cartSelect
    let status = false
    arr.map(item => {
      if(item.lessonId === id) {
        status = true
      }      
    })
    return status
  }

  toPay() {
    let obj = this.state.cartSelect
    if(!obj.length) {
      message.error('请先选择一个商品！');
      return
    }
    let lId = [], sId = []
    obj.map(item => {
      lId.push(item.lessonId)
      sId.push(item.schoolId)
    })
    this.props.toPay({
      isMobile: true,
      lessonId: lId.join(','),
      schoolId: sId.join(','),
      payMethod: this.state.payMethod === 'wx' ? 1 : 0
    })
  }

  findCourseBy() {
    this.setState({
      showSelect: false
    })
  }

  // checkActve(menu, item) {
  //   let str = ''
  //   if(item.title = '我的身份' && menu.val === this.state.identfiy) {
  //     str = 'active'
  //   }

  //   return str

  // }

  renderSelBtn(item) {
    let str = ''
    let arr = []
    if(item.title === '我的身份') {
      str = this.state.identfiy
    }else if(item.title === '所属年级') {
      str = this.state.grade
    }else if(item.title === '所属科目') {
      str = this.state.subjectName
    }else if(item.title === '课程状态') {
      str = this.state.type
    }else if(item.title === '课程类型') {
      str = this.state.lessonType
    }

    item.menu.map(menu=> {
     arr.push(<span key={menu.val} className={str === menu.val ? 'active': ''} onClick={()=> this.CSelBtn(menu.val, item.title)}>{menu.name}</span>)
    })
    return arr
  }

  CSelBtn(val, title) {
    if(title === '我的身份') {
      this.initSubject(val)
      this.setState({
        identfiy: val,
        grade: '全部',
        subjectName: '全部'
      })
    }else if(title === '所属年级') {
      if(val === this.state.grade) {
        val = '全部'
      }
      this.setState({
        grade: val
      })
    }else if(title === '所属科目') {
      if(val === this.state.subjectName) {
        val = '全部'
      }
      this.setState({
        subjectName: val
      })
    }else if(title === '课程状态') {
      if(val === this.state.type) {
        val = 'all'
      }
      this.setState({
        type: val
      })
    }else if(title === '课程类型') {
      if(val === this.state.type) {
        val = ''
      }
      this.setState({
        lessonType: val
      })
    }
  }

  render() {
    return (<Wrapper>
        <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="home"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(' + require('./img/home.svg')+ ') center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(' + require('./img/home_a.svg')+ ') center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'home'}
            onPress={() => {
              this.setState({
                selectedTab: 'home',
              });
            }}
            data-seed="logId"
          >
            {this.state.selectedTab ? this.renderContent('home') : this.renderVideo()}
            <Modal
              visible={this.state.showSelect}
              transparent
              width="100%"
              maskStyle={{backgroundColor: '#fff'}}
              bodyStyle={{width: '100%', position: 'fixed', top: '0', bottom: '0', backgroundColor: '#fff', paddingLeft: '10px', paddingRight: '10px', overflowY: 'auto'}}
              closable={false}
              maskClosable={false}
              footer={null}
            >
              <div>
                <h3 style={{fontSize: '19px', fontWeight: 'bold', textAlign: 'center', marginTop: '30px'}}>简单几步，让课程选择更简便</h3>
                {
                  sleMenu.map(item=> {
                    return (
                      <SelectItem key={item.title}>
                      <div>
                        <p>{item.title}</p>
                        <div style={{paddingLeft: '4px', paddingRight: '4px'}}>
                          {
                            this.renderSelBtn(item)
                          }
                        </div>
                      </div>
                    </SelectItem>
                    )
                  })
                }
                <div style={{textAlign:'center', marginTop: '6px'}}>
                  <a onClick={()=> this.setState({showSelect: false}, ()=> this.getList())} style={{display: 'inline-block', width: '150px', height: '48px', margin: '0 auto', backgroundColor: '#91d82b', color: '#fff', lineHeight: '48px', textAlign: 'center', borderRadius: '24px'}}>
                    开始学习
                  </a>
                </div>
                <a style={{position: 'absolute', right: '26px', top: '20px', fontSize: '20px', color: '#999'}} onClick={()=> this.setState({showSelect: false})}>
                  <PIcon type="close" />
                </a>
              </div>
            </Modal>
          </TabBar.Item>
          <TabBar.Item
            title="我的课表"
            key="course"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(' + require('./img/course.svg')+ ') center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(' + require('./img/course_a.svg')+ ') center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'course'}
            onPress={() => {
              this.setState({
                selectedTab: 'course',
              });
            }}
            data-seed="logId"
          >
            {this.renderContent('course')}
          </TabBar.Item> 
          
          <TabBar.Item
            title="购物车"
            key="cart"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(' + require('./img/cart.svg')+ ') center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(' + require('./img/cart_a.svg')+ ') center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'cart'}
            onPress={() => {
              this.setState({
                selectedTab: 'cart',
              });
            }}
            badge={this.props.cart.get('list').size}
            data-seed="logId"
          >
            {this.renderContent('cart')}
          </TabBar.Item>
        </TabBar>
        </div>
      </Wrapper>)
  }
}

const mapState = (state) => {
  return {
    courseList: state.getIn(['course', 'course','result']),
    cart: state.getIn(['header', 'cartList']),
    courseDescript: state.getIn(['home', 'courseDescript']),
    myCourse: state.getIn(['myCourse', 'myCourse']),
    myList: state.getIn(['myCourse', 'courseList']),
    banner: state.getIn(['banner', 'banner'])
  }
}
  
const mapDispatch = (dispatch) => ({
  getLesson(params) {
    dispatch(actionCreators.getCourseListByPhone(params))
  },
  addCart(params) {
    dispatch(addCart(params))
  },
  removeCart(params) {
    dispatch(removeCart(params))
  },
  getCartList() {
    dispatch(getCartList())
  },
  getCourseDescript(params) {
    dispatch(getCourseDescript(params))
  },
  logout() {
    dispatch(ClearPhoneUser())
  },
  getMyCourse(params) {
    dispatch(getMyCourse(params))
  },
  toPay(params) {
    dispatch(toPay(params))
  },
  getOneDate(params) {
    dispatch(getOneDay(params))
  },
  getBannner() {
    dispatch(getBanner({
      type: 1
    }))
  }
})

export default connect(mapState, mapDispatch)(withRouter(PHome))